<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>新人免单</title>
	<link rel="stylesheet" type="text/css" href="../../css/api.css" />
	<style>
    html,body{height: 100%;width: 100%;}
    #app{height: 100%;background:#ff4c41;}
    .topbox{width: 10rem;height: 5.186rem;background-image: url(../../image/specialPage/bg01.png);
    background-size: 100% 100%;position: relative;}
    .rulebox{position: absolute;top:0.48rem;right: 0px;height: 0.61rem;width:1.17rem }
    .listbox{height: auto;background:#ff4c41;border-radius: 0.3rem 0.3rem 0 0;
      position: relative;top:-0.5rem;}
    .listbox1{display: flex;flex-wrap: nowrap;padding: 0px 0.8rem;}
    .listbox1 img{width: 0.88rem;height: 0.88rem;}
    .img1{margin: 0.4rem auto 0.26rem;display: flex;}
    .img2{width:0.6rem;height:auto !important;padding-top: 0.85rem;}
    .listbox1 p{font-size:0.32rem;color: rgb(255,255,255);text-align: center;font-weight: bold;}
    .box1{width:2.4rem;}
    .box3{width:2.4rem;}
    .box5{width:2.4rem;}
    .goodsllist{margin:1rem 0.27rem 0;padding-bottom: 1rem;}
    [v-cloak] {display: none;}
    .goodsllist ul li{width: 100%;background: #fff;height: 3.86rem;border-radius: 0.2rem;
      padding: 0.27rem;box-sizing: border-box;margin-bottom: 0.26rem;display: flex;
      flex-wrap: nowrap;justify-content: flex-start;}
    .goodsTitle{font-weight: bold;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;
      overflow: hidden;}
    .goodsImgbox{width:3.33rem !important;height:3.33rem !important;margin-right: 0.2rem;position: relative;}
		.goodsImg{max-width: 3.33rem;max-height: 3.33rem;}
		.biaoqian{position: absolute;width:1.44rem;height:0.68rem;top:0px;left:-0.41rem;}
    .goodsMsg{color: rgb(51,51,51);font-size: 0.37rem;padding: 0.21rem 0px;width: 100%;}
    .Moneyicon{font-size: 0.27rem;color: rgb(255,52,0);}
    .quan{color: #fff;margin-right: 0.1rem;font-size:0.26rem;border-radius:0.1rem;
	    padding:0.05rem 0.2rem;background-image: url(../../image/specialPage/quan.png);
	    height:0.45rem;background-size:100% 100%;text-align: center;}
    .butie{background: rgb(255,228,228);font-size:0.26rem;color: rgb(255,52,0);border-radius:0.1rem;
  	  border: 1px solid rgb(255,77,58);padding:0.05rem 0.15rem;height:0.45rem;}
    .oldmoney{background:rgb(255,228,228);font-size:0.32rem;color: rgb(255,52,0);border-radius:0.1rem;
  	  padding: 0.05rem 0.12rem;position: relative;top:-0.15rem}
    .goodsprice{height:2.1rem;display: flex;flex-wrap: nowrap;justify-content:space-between;align-items:flex-end;}
    .priceNum{color: rgb(255,52,0);font-size:0.51rem;margin-bottom: 0.1rem}
    .shopBtn{width:2rem;height:0.7rem;display: flex;align-items: center;justify-content: center;background:#efefef;border-radius: 0.4rem;
			color: #999999;margin-bottom: 0.05rem;}
		.shopBtn1{width:1.8rem;height:0.6rem;display: flex;align-items: center;justify-content: center;background:#ff4c41;border-radius: 0.3rem;
			color: #fff;margin-bottom: 0.05rem;}
	</style>
</head>
<body>
	<div id="app">
      <div class="topbox">
          <img class="rulebox" onclick="explain()" src="../../image/specialPage/specialrule.png" alt="">
      </div>
      <div class="listbox">
          <div class="listbox1">
              <div class="box1">
                  <img class="img1" src="../../image/specialPage/haohuo.png" alt="">
                  <p>选择心仪好货</p>
              </div>
              <div class="box2">
                  <img class="img2" src="../../image/specialPage/specialdian.png" alt="">
              </div>
              <div class="box3">
                  <img class="img1" src="../../image/specialPage/gouwuche.png" alt="">
                  <p>0元购买</p>
              </div>
              <div class="box4">
                  <img class="img2" src="../../image/specialPage/specialdian.png" alt="">
              </div>
              <div class="box5">
                  <img class="img1" tapmode onclick="specialshear()" src="../../image/specialPage/shear.png" alt="">
                  <p>邀请好友得5元</p>
              </div>
          </div>
          <div class="goodsllist">
              <ul v-cloak>
                  <li v-for="item in data" @click="openGoodsDeatilFun(item)">
											<div class="goodsImgbox">
												<img class="goodsImg" :src='item.pict_url' alt="">
												<img class="biaoqian" src="../../image/specialPage/biaoqian.png" alt="">
											</div>
                      <div class="goodsMsg">
                          <p class="goodsTitle">{{item.short_title != '' ? item.short_title :  item.title}}</p>
                          <div class="goodsprice">
                              <div class="priceMsg">
																	<p><span class="oldmoney">原价￥{{item.zk_final_price}}</span></p>
                                  <p class="priceNum"><span class="Moneyicon">新人专享价￥</span>{{item.end_price}}</p>
                                  <p style="color: rgb(153,153,153);font-size: 0.32rem;">{{item.volume}}人已抢购</p>
                              </div>
                              <div  :class="item.status == 1? 'shopBtn1':'shopBtn'">{{item.status == 1? '免费抢' : '已抢光'}}</div>
                          </div>
                      </div>
                  </li>
              </ul>
          </div>
      </div>
	</div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript">
  (function (doc, win) {
  	var docEl = doc.documentElement,
  	resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
  	recalc = function () {
  		var clientWidth = docEl.clientWidth;
  		if (!clientWidth) return;
  		docEl.style.setProperty('font-size',(clientWidth / 10) + 'px','important');
  	};
  	if(!doc.addEventListener)return;
  	win.addEventListener(resizeEvt, recalc, false);
  	doc.addEventListener('DOMContentLoaded', recalc, false);
  })(document, window);
  var app;
	var aliBC;
	apiready = function () {
      // 初始化数据
      initializeData();
      // 获取零元购的商品信息
      getData(1);
			aliBC = api.require("aliBC");
  }
  //  初始化数据
  function initializeData() {
    app = new Vue({
      el: '#app',
      data: {
        page: 1, //当前页数
        pageNum: 10, //每页行数
        whetherToLoading: false, //页面是否在加载中
        data: [], //数据对象
        pullLoad: '正在加载中...'
      }
    });
  }

  function getData(){
    $api.ajax({
        url: 'api/goods/list',
        method: 'get',
        data:{
          values: {
            type: 2,
            next_p:app.page
          }
        }
    }, function (ret, err) {
        if (ret) {
						console.log(JSON.stringify(ret))
            if (app.page == 1) {
  						app.data = ret.data.list;
  					} else {
  						app.data = app.data.concat(ret.data.list);
  					}
        } else {
            api.alert({ msg: JSON.stringify(err) });
        }
    });
  }

	// 跳转至详情
	function opendetail(data) {
		if(data.status == 1){
			api.openTabLayout({
					name: 'item',
					url: '../item.html',
					useWKWebView: true,
					bgColor: '#fff',
					pageParam: {
							item: data
					}
			});
		}else{
			if (getToken()) {
					relation(function (a) {
							$api.ajax({
									url: 'api/goods/userIsBuy',
									method: 'get',
									data: {
											values: {
													item_id: data.item_id,
													type: data.type,
											}
									},
							}, function (ret,err) {
									if(ret.data.is_coupon){
										api.openTabLayout({
												name: 'item',
												url: '../item.html',
												useWKWebView: true,
												bgColor: '#fff',
												pageParam: {
														item: data
												}
										});
									}else{
										api.toast({
												msg: '该商品已抢光',
												duration: 1000,
												location: 'middle'
										});
									}
							})
					}, function () {
					// 未淘宝授权
							showLogin(function () {
									tbsq();
							}, function () {
									api.toast({
											msg: '淘宝授权失败，请重试',
											duration: 2000,
											location: 'middle'
									});
							})
					})
			}
		}
	}
	function relation(a, b) {
	    $api.ajax({
	        url: 'api/member/info',
	        method: 'get',
	    }, function (ret) {
	        if (ret.data.info.relation_id > 0) {
	            a && a(ret.data.info.relation_id);
	        } else {
	            b && b()
	        }
	    });
	}
	// 淘宝授权方法
	function showLogin(a, b) {
			aliBC.logout(function (ret, err) {
					if (ret.status) {
							aliBC.showLogin(function (ret, err) { //用户登录授权
									if (ret) {
											a && a();
									} else {
											b && b();
									}
							});
					}
			});
	}

	// 淘宝授权
	function tbsq() {
		$api.ajax({
			url: "api/member/tb_relate",
			method: 'get',
		}, function (ret) {
			// var urll = ret.data.oauth_url.replace('https://cs.xianlady.com/','https://fudai.zhequanapp.com/');
			// console.log(urll);
			aliBC.showPageByUrl({
				url: ret.data.oauth_url,
			}, function (ret, err) {
				if (ret) {
					api.toast({
						msg: '淘宝授权成功',
						duration: 2000,
						location: 'middle'
					});
				} else {
					api.toast({
						msg: '您已取消淘宝授权',
						duration: 2000,
						location: 'middle'
					});
				}
			});
		})
	}

  // 新人免单分享福利
  function specialshear(){
      if (getToken()) {
          //获取分享域名
          $api.ajax({
              url: 'api/Member/share_url',
              method: 'get',
          }, function (ret) {
                var wx = api.require('wx');
                wx.shareWebpage({
                    apiKey: '',
                    scene: 'session',  //微信会话
                    title: api.getGlobalData({key: 'member_info'}).nick_name + "邀你0元抢，领券省钱，超高补贴",
                    description: "",
                    thumb: '../../image/sheng.png',
                    contentUrl: ret.data.share_url + "api/oauth/share?sign=" + api.getGlobalData({
                        key: 'member_info'
                    }).sign,
                }, function (ret, err) {
                    if (ret.status) {
                        api.toast({
                            msg: '分享成功',
                            duration: 3000,
                            location: 'middle'
                        });
                    } else {
                        api.toast({
                            msg: '分享失败',
                            duration: 3000,
                            location: 'middle'
                        });
                    }
                });
          });
      }
  }

	function explain() {
		var dialogBox = api.require('dialogBox');
		dialogBox.discount({
		    rect: {
		        w: 305,
		        h: 310
		    },
		    styles: {
		        bg: '#FFF',
						corner: 10,
						maskBg:'rgba(0,0,0,0.2)',
		        image: {
		            path: 'widget://image/specialPage/ruleMsg.png',
		            marginB: 160
		        },
		        cancel: {
		            icon: 'widget://image/specialPage/close.png',
								marginB:110,
		            w: 30,
		            h: 30
		        }
		    },
				tapClose:true,
		}, function(ret) {
		    if (ret.eventType == 'cancel') {
		        dialogBox.close({
		            dialogName: 'discount'
		        });
		    }
		});
	}

	function numFun(money){
		return money;
	}
</script>
</html>
